<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<article>
	<header>
		<h1><a href="/${article.contextName}/${article.id}">#${article.partNumber} ${article.title}</a></h1>
		<p class="published">
			<fmt:formatDate var="utcDt" value="${article.published}" pattern="yyyy-MM-dd'T'HH:mm:ss" timeZone="UTC"/>
			<time pubdate="pubdate" datetime="${utcDt }">
				<fmt:formatDate value="${article.published}" pattern="yyyy/MM/dd" timeZone="JST" />
			</time>
		</p>
		<div style="height:20px; overflow: hidden; margin-top:-5px; 
			text-align:right; padding-right: 3em;">
		<div class="g-po-outer" style="display:inline-block; position:relative; top:-2px;"><div class="g-plusone" data-size="small"></div></div>
		<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true"></div>
		<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
		<a style="margin-right:15px;position: relative; top: -1px;" href="#" onclick="Evernote.doClip({contentId:'main_section'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>
		<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
		</div>
	</header>
	<div class="body" id="main_section">
		<div style="float:right; width:336px; height:280px; padding:0 0 1em 1em;">
			<script type="text/javascript"><!--
			google_ad_client = "pub-2855357403949640";
			/* 336x280, IT Penguin */
			google_ad_slot = "5428407488";
			google_ad_width = 336;
			google_ad_height = 280;
			//-->
			</script>
			<script type="text/javascript"
			src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>		
		</div>
		<section class="description">${article.description}</section>
		<section>${currentSection}</section>
		<code>
public void aaaBbb() {
	String sss = "aaaa";
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
	Bbb ccc = new Bbb();
}
			</code>
	</div>
	
	<nav class="page_nav">
		<ul>
			<c:if test="${section == 1 && article.partNumber != 1}">
				<c:set var="previous" value="${seriesList[article.partNumber - 2]}" />
				<li>
					<a href="/${previous.contextName}/${previous.id}">#${previous.partNumber} ${previous.title}</a>
				</li>
			</c:if>
			<c:if test="${section != 1}">
				<li>
					<a href="/${article.contextName}/${article.id}/${section - 1}">&lt;</a>
				</li>
			</c:if>
			<c:forEach varStatus="status" items="${article.sections}">
				<c:if test="${status.count == section}">
					<li class="current">${status.count}</li>
				</c:if>
				<c:if test="${status.count != section}">
					<li><a href="/${article.contextName}/${article.id}/${status.count}">${status.count}</a></li>
				</c:if>
				<c:set var="lastSecNo" value="${status.count}" />
			</c:forEach>
			<c:if test="${section == lastSecNo && article.partNumber != fn:length(seriesList)}">
				<c:set var="next" value="${seriesList[article.partNumber]}" />
				<li>
					<a href="/${next.contextName}/${next.id}">#${next.partNumber} ${next.title}</a>
				</li>
			</c:if>
			<c:if test="${section != lastSecNo}">
				<li>
					<a href="/${article.contextName}/${article.id}/${section + 1}">&gt;</a>
				</li>
			</c:if>
		</ul>
	</nav>
</article>
<div style="border:dotted 1px #015b9a; margin:1em auto 0; width:728px; height:15px; padding:1em 0;">
	<script type="text/javascript"><!--
	google_ad_client = "pub-2855357403949640";
	/* 728x15, IT Penguin Link Unit */
	google_ad_slot = "4541719292";
	google_ad_width = 728;
	google_ad_height = 15;
	//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<nav class="seriese_nav">
	<h1><a href="/${parent.contextName}/${parent.id}">${parent.title}</a></h1>
	<section>${parent.description}</section>
	<ul>
		<c:forEach var="otherArticle" items="${seriesList}">
			<li>
			<c:if test="${otherArticle.id == article.id}">
				#${otherArticle.partNumber} ${otherArticle.title}
			</c:if>
			<c:if test="${otherArticle.id != article.id}">
				<a href="/${otherArticle.contextName}/${otherArticle.id}">#${otherArticle.partNumber} ${otherArticle.title}</a>
			</c:if>
			<fmt:formatDate var="utcDt" value="${otherArticle.published}" pattern="yyyy-MM-dd'T'HH:mm:ss" timeZone="UTC"/>
			<time datetime="${utcDt}"><fmt:formatDate value="${otherArticle.published}" pattern="yyyy/MM/dd"/></time>
			</li>
		</c:forEach>
	</ul>
</nav>
   